<template lang="pug">
  el-amap(
    class="amap-demo"
    vid="amap"
    :zoom="zoom"
    :center="center"
    :style="amapStyle")
    el-amap-polyline(
      :editable="polyline.editable"
      :path="polyline.path"
      :events="polyline.events")
</template>

<script>
export default {
  props: {
    resource: {
      type: String
    },
    height: {
      type: Number,
      default: 500
    }
  },
  created () {
    this.getData()
  },
  data () {
    return {
      isLoading: false,
      zoom: 14,
      center: this.$config.lonlat,
      polyline: {
        path: [],
        events: {
          click (e) {
            // console.log('click polyline')
          },
          end: (e) => {
            let newPath = e.target.getPath().map(point => [point.lng, point.lat])
            console.log(newPath)
          }
        },
        editable: false
      }
    }
  },
  computed: {
    amapStyle () {
      return {
        height: this.height + 'px'
      }
    }
  },
  methods: {
    changeEditable () {
      this.polyline.editable = !this.polyline.editable
    },
    getData () {
      this.isLoading = true
      this.$get({
        url: this.resource,
        params: {
          orderBy: '',
          filterBy: '',
          pageSize: 999999,
          pageIndex: 1
        }
      }).then(data => {
        // console.info(data)
        let pathList = []
        this.polyline.path = data.data.map(item => {
          pathList.push([item.longitude, item.latitude])
        })
        this.polyline.path = pathList.filter(path => path[0] && path[1])
        this.center = this.polyline.path.length ? this.polyline.path[0] : this.center
        // console.log(this.polyline.path)
        this.isLoading = false
      })
    }
  }
}
</script>

<style scoped lang="sass">
  .amap-demo
    height: 450px
</style>
